<template>
	<view class="bindBankCardPage">
		<view class="identityAuthenticationMain">
			<view class="title">
				<view class="name">收款账号认证</view>
				<view class="tip">为了有效保障您的资金安全，减少提现给您带来不必要的麻烦，
					<text>请填写与实名认证一致的信息！</text>
				</view>
				<view class="BJtips" v-if="userType == 'BJ'">* 请到后台设置开票信息</view>
			</view>
			<view class="inputBody">
				<view class="inputItem">
					<text>账户姓名</text>
					<view class="solid-bottom">
						<input type="text" :value="loginInfo.real_name" disabled="false" />
					</view>
				</view>
				<view class="inputItem">
					<text>银行预留手机号</text>
					<view class="solid-bottom">
						<input type="number" placeholder="请填写银行预留手机号" v-model="phoneNumber" maxlength="11"/>
					</view>
				</view>
				<view class="inputItem">
					<text>收款账号</text>
					<view class="solid-bottom">
						<input placeholder="请填写储蓄卡卡号" text="number" value="cardNumber" v-model="cardNumber"
							@blur="bankSelect" />
					</view>
				</view>
				<view class="inputItem">
					<text>所属银行</text>
					<view class="solid-bottom itemBox bottomArr">
						<picker @change="bindBankChange" range-key="bank_name" :range="bankArr">
							<view class="picker">
								{{ bankIndex > -1 ? bankArr[bankIndex] : "请选择银行" }}
							</view>
						</picker>
					</view>
				</view>
				
				<view class="inputItem">
					<text >开户城市 <text style="display: inline-block;font-size: 26rpx;color:#fb4535;padding-left: 10rpx;" v-if="userType == 'BJ'"> (开户城市决定支行地区)</text></text>
					<view class="solid-bottom itemBox bottomArr">
						<picker mode="multiSelector" :value="areaIndex" :range="[provList, cityList]" range-key="name"
							@change="change" @columnchange="columnChange">
							<view>{{ provList[areaIndex[0]].name }}，{{cityList[areaIndex[1]].name}}
							</view>
						</picker>
					</view>
				</view>

				<view class="inputItem" v-if="userType == 'BJ'">
					<text>银行卡开户支行</text>
					<view class="solid-bottom itemBox bottomArr" @click="showBankBranch">
						<view class="picker">
							{{ bankBanchIndex > -1 ? bankBranchArr[bankBanchIndex].bank_branch_name : "请选择银行卡开户支行" }}
						</view>
					</view>
				</view>

				<!-- 银行卡开户支行 -->
				<u-popup v-model="bankBranchShow" mode="bottom" height="70%">
					<view class="productViewMain">
						<view class="productViewHeader solid-bottom">
							<view class="backView flex align-center justify-center" @click="bankHideTap">
								<u-icon name="arrow-left" color="#333" size="32"></u-icon>
							</view>
							<text>请选择{{bankArr[bankIndex]?bankArr[bankIndex]:'银行'}}开户支行</text>
							<view class="comfirmView" @click="bankHideTap">完成</view>
						</view>

						<view class="agentViewSearch solid-bottom">
							<u-search placeholder="请输入开户支行名称" v-model="searchAgent" :show-action="false"
								shape="square" @change="searchTap()"></u-search>
						</view>

						<view class="productViewBox" v-if="bankBranchArr.length > 0">
							<view class="productViewItem solid-bottom flex align-center justify-between
		    " v-for="(item, index) in bankBranchArr" :key="index" @click="selectBanktTap(item, index)">
								<view>{{ item.bank_branch_name }}</view>
							</view>
						</view>
						<view class="noMachine flex align-center" v-else style="padding-top: 100rpx;">
							<image src="../../static/images/noData/zwsh.png" mode="widthFix"></image>
							<text>暂无分行数据</text>
						</view>
					</view>
				</u-popup>

			</view>
			<button class="btn" @click="changeBankCard">提交认证</button>
		</view>
		<u-toast ref="uToast" />
		<toast></toast>
	</view>
</template>

<script>
	import AreaList from "../../common/arealist.js";
	export default {
		data() {
			return {
				loginInfo: null,
				modalName: null,
				userInfo: null,
				//获取银行
				bankArr: [], //选中的银行
				bankIndex: -1,

				bankBranchShow: false,
				bankBanchIndex: -1,
				searchAgent:'',
				//银行分行
				bankBranchArr: [],
				
				//城市选择
				provList: [{
						name: "请选择省",
					},
					{},
					{},
					{},
					{},
					{},
					{},
					{},
					{},
					{},
					{},
					{},
					{},
					{
						name: "上海",
					},
				],
				cityList: [{
					name: "请选择市",
				}, ],
				areaIndex: [13, 0],

				//换绑银行卡
				city: "上海",
				bankName: "",
				cardNumber: "",
				phoneNumber:'',
				bankBranchName:'',
				bankBranchNumber:'',
				isClick: false,
				userType:'HJ',
			};
		},
		computed: {
			bankNumber() {
				if (this.cardInfo.card_number) {
					return this.$tools.blankFour(this.cardInfo.card_number);
				}
			},
		},
		onLoad() {
			this.loginInfo = uni.getStorageSync("loginInfo");
			this.bankList();
			let that = this;
			this.$u.api
				.listArea({
					parent_id: 0,
				})
				.then((res) => {
					// 打印调用成功回调
					this.provList = res.result;
				})
				.catch((res) => {
					if (res.errMsg == "request:fail timeout") {
						this.$u.toast("请求超时，请重试!");
					} else if (res.errMsg == "request:fail") {
						this.$u.toast("请求失败，请重试");
					} else {
						this.$u.toast(res.resultDesc);
					}
					this.$loading(false);
					setTimeout(() => {
						this.$u.route({
							type: "navigateBack",
							delta: 1,
						});
					}, 2000);
				});
			this.listArea(148);
		},
		
		onShow() {
			this.userType =  uni.getStorageSync("loginInfo").user_type
		},

		methods: {
			//支持银行获取
			bankList() {
				this.$u.api
					.listSupportBank()
					.then((res) => {
						if (res.status == 200) {
							// 打印调用成功回调
							this.bankArr = [];
							res.result.forEach((item) => {
								this.bankArr.push(item.bank_name);
							});
						} else {
							this.bankList();
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast(res.resultDesc);
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
			bindBankChange(e) {
				this.bankIndex = e.detail.value;
				this.bankName = this.bankArr[this.bankIndex];
				this.bankBranchArr = [];
				this.bankBanchIndex = -1;
				this.bankBranchNumber = '',
				this.searchAgent = '';
				this.getBankBanch()
			},

			// 分行选择弹窗
			showBankBranch() {
				if(!this.bankName){
					this.$refs.uToast.show({
						title: "请先选择银行",
						type: "warning",
					});
				}else{
					this.bankBranchShow = true
					this.searchAgent = ''
				}
			},

			// 分行返回箭头
			bankHideTap() {
				this.bankBranchShow = false;
			},

			// 分行选择
			selectBanktTap(item, index) {
				this.bankBanchIndex = index
				this.bankBranchShow = false
				this.bankBranchNumber = item.cnaps_code
			},
			
			// 分行搜索
			searchTap() {
				this.bankBanchIndex = -1;
				this.getBankBanch()
			},
			
			// 获取银行分行列表
			getBankBanch(){
				this.$u.api.getCnapsCode({
					bank_name:this.bankName,
					city: this.city,
					keyword:this.searchAgent
				})
				.then((res)=>{
					if (res.status == 200) {
						// 打印调用成功回调
						this.bankBranchArr = [];
						this.bankBranchArr = res.result
					}
				})
				.catch((res) => {
					if (res.errMsg == "request:fail timeout") {
						this.$u.toast("请求超时，请重试!");
					} else if (res.errMsg == "request:fail") {
						this.$u.toast("请求失败，请重试");
					} else {
						this.$u.toast(res.resultDesc);
					}
					this.$loading(false);
					setTimeout(() => {
						this.$u.route({
							type: "navigateBack",
							delta: 1,
						});
					}, 2000);
				});
			},

			// 城市变更
			columnChange(e) {
				let index = 0;
				if (e.detail.column == 0) {
					index = e.detail.value;
					this.areaIndex[0] = index;
					this.listArea(this.provList[index].id);
				}
			},
			change(e) {
				this.areaIndex = e.detail.value;
				this.city = this.cityList[this.areaIndex[1]].name;
				this.bankBanchIndex = -1;
				this.bankBranchArr = [];
				this.searchAgent = '';
				this.getBankBanch()
			},

			//获取地区
			listArea(id) {
				let that = this;
				this.$u.api
					.listArea({
						parent_id: id,
					})
					.then((res) => {
						// 打印调用成功回调
						this.cityList = res.result;
						// res.result.forEach(item => {
						// 	this.cityList.push(item);
						// })
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast(res.resultDesc);
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
			//换绑
			changeBankCard() {
				this.isClick = true;
				var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!this.phoneNumber) {
					this.$refs.uToast.show({
						title: "请输入银行预留手机号",
						type: "default",
					});
					return;
				}
				if(!myreg.test(this.phoneNumber)){ 
				        this.$refs.uToast.show({
				        	title: "银行预留手机号有误",
				        	type: "default",
				        });
				    return;
				} 
				if (!this.cardNumber) {
					this.$refs.uToast.show({
						title: "请输入银行卡号",
						type: "default",
					});
					return;
				}
				if (!this.bankName) {
					this.$refs.uToast.show({
						title: "请选择所属银行",
						type: "default",
					});
					return;
				}
				if (!this.bankBranchNumber && this.userType == 'BJ') {
					this.$refs.uToast.show({
						title: "请选择所属分行",
						type: "default",
					});
					return;
				}
				let params = {
					phone_number:this.phoneNumber,
					card_number: this.cardNumber,
					bank_name: this.bankName,
					city: this.city,
					cnaps_code:this.userType == 'BJ'?this.bankBranchNumber:'',
				};
				params = this.$tools.aesEncryptBat(this, params, "card_number,phone_number");
				this.$u.api.bindBankCard(params).then((res) => {
					let loginInfo = uni.getStorageSync("loginInfo");
					if (res.status == 200) {
						this.isClick = false;
						this.$refs.uToast.show({
							title: res.msg,
							type: "default",
						});
						loginInfo.isBindCard = 1;
						uni.setStorageSync("loginInfo", loginInfo);
						this.modalName = null;
						//更新完成跳转页面
						setTimeout(() => {
							wx.redirectTo({
								url: "/pages/wallet/bankCard",
							});
						}, 1500);
					} else {
						this.isClick = false;
						this.$refs.uToast.show({
							title: res.msg,
							type: "default",
						});
					}
				});
			},
			//自动补全银行名称
			bankSelect() {
				let params = {
					card_number: this.cardNumber,
				};
				params = this.$tools.aesEncryptBat(this, params, "card_number");
				this.$u.api.autoBankName(params).then((res) => {
						if (res.status == 200) {
							this.bankIndex = res.result.index;
							this.bankName = res.result.bank_name;
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: "default",
							});
						}
						this.searchAgent = '';
						this.bankBanchIndex = -1;
						this.bankBranchNumber = '',
						this.getBankBanch()
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast(res.resultDesc);
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},

			//更新缓存
			updataUserInfo() {
				this.$u.api
					.initUserInfo()
					.then((res) => {
						if (res.status == 200) {
							uni.setStorageSync("userInfo", res.result);
						}
					});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.identityAuthenticationMain {
		padding:10rpx 50rpx 50rpx;
	}

	.title {
		padding-bottom: 40rpx;
	}

	.title view.name {
		font-size: 40rpx;
		color: #333;
		font-weight: bold;
		padding-top: 30rpx;
	}

	.title view.tip {
		padding: 20rpx 0 50rpx;
		font-size: 28rpx;
		line-height: 46rpx;
		text-align: justify;
	}

	.title view.tip text {
		color: #f33;
		font-weight: bold;
	}
	.BJtips{
		font-weight: 700;
		letter-spacing: 2rpx;
		color: #f33;
		font-size: 32rpx;
	}

	.inputItem text {
		font-size: 32rpx;
		line-height: 50rpx;
		display: block;
		padding-top: 20rpx;
		font-weight: bold;
	}

	.inputItem>view.itemBox {
		height: 120rpx;
		width: 100%;
		line-height: 120rpx;
		position: relative;
	}

	.inputItem>view.itemBox.bottomArr::before {
		content: "";
		display: block;
		width: 16rpx;
		height: 16rpx;
		border-right: 6rpx solid #ccc;
		border-bottom: 6rpx solid #ccc;
		transform: rotate(45deg);
		margin-top: -8rpx;
		position: absolute;
		right: 0;
		top: 50%;
	}

	.inputItem view input {
		height: 120rpx;
	}

	.inputItem .picker {
		height: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 600rpx;
	}

	.btn {
		margin-top: 80rpx;
		width: 100% !important;
		font-size: 28rpx;
		color: #fff;
		background: #fb4535;
		border-radius: 80rpx;
	}


	.productViewMain {
		position: relative;
		
		.agentViewSearch {
			padding: 20rpx 30rpx 20rpx;
			box-sizing: border-box;
			position: fixed;
			width: 100%;
			left: 0;
			top: 80rpx;
			background-color: #fff;
			z-index: 9;
		}

		.productViewHeader {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			background-color: #fff;
			z-index: 9;

			.backView {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				left: 0;
				top: 0;
			}

			.comfirmView {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #fb4535;
				padding: 0 30rpx;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.productViewBox {
			padding: 80rpx 30rpx 0;
				margin-top: 100rpx;
			.productViewItem {
				height: 100rpx;
			}
		}
	}
</style>
